<div v-show="context.mode == 3" style="margin:0;display: flex;flex-flow: column;height: 100%;">
  <div>
    <v-tabs v-model="tab" grow color="cyan">
      <v-tab v-for="(group,i) in context.algs" :key="i" :href="`#tab-${i}`">
        {{ group.name}}
      </v-tab>
    </v-tabs>
  </div>
  <div style="flex: 1;overflow: auto;">
    <v-tabs-items v-model="tab">
      <v-tab-item v-for="(group,i) in context.pics" :key="i" :value="'tab-' + i" style="height: 100%;">
        <v-layout row wrap style="margin: 0%; padding:0%; min-width: 0%; min-height: 0%;align-items: stretch;">
          <v-flex d-flex style="padding:0%; min-width: 0%; min-height: 0%;" v-for="(pic, j) in group" :key="j">
            <v-card outlined :style="{width:Math.min(width, height) / 4+'px'}" style="height: 100%;">
              <p class="title" style="text-align:center;margin: 0%;padding: 0%;color: indianred">{{context.algs[i].algs[j].name}}</p>
              <img :src="pic" style="width: 100%;" @click="tap(i, j)" />
              <p style="text-align:center;word-wrap:break-word;margin: 0%;padding: 0%;">{{context.algs[i].algs[j].exp}}</p>
            </v-card>
          </v-flex>
        </v-layout>
      </v-tab-item>
    </v-tabs-items>
  </div>
</div>
